<template>
  <div class="introduction">
    <mt-search class="search" cancel-text="取消" placeholder="搜索" v-model="inputVal">
    </mt-search>
    <mt-spinner class="spinner" type="fading-circle" v-show="isShow" color="#000"></mt-spinner>
    <mt-loadmore ref="loadmore" :top-method="refrash" :topDistance="30">
      <ul v-infinite-scroll="loadMore" infinite-scroll-disabled="isDisLoad" infinite-scroll-distance="10">
        <li v-for="el in arr" :key="el.id">
          <mt-cell-swipe :to="'/detailArt/' + el.id" is-link :right="right(el.id)">
            <div class="row">
              <img slot="icon" :src="el.src" />
              <section>
                <h5 v-text="el.title"></h5>
                <p v-text="el.date"></p>
              </section>
            </div>
          </mt-cell-swipe>
        </li>
      </ul>
    </mt-loadmore>
  </div>
</template>
<script>
import { Toast } from "mint-ui";
export default {
  name: "introductionCom",
  data() {
    return {
      arr: [],
      isDisLoad: false,
      isShow: false,
      skip: 0,
      inputVal: '',
      right: (id) => [
        {
          content: "删除",
          style: { background: "red", color: "#fff" },
          handler: () => {
            this.delete(id);
          },
        },
      ],
    };
  },
  methods: {

    refrash() {
      this.arr.length = 0;
      this.skip = 0;
      this.loadData();
      setTimeout(() => {
        this.$refs.loadmore.onTopLoaded();
      }, 1000);
    },
    loadMore() {
      this.skip = this.arr.length;
      this.loadData();
    },
    loadData() {
      const params = { start: this.skip, pageSize: 8 };
      this.isShow = true;
      this.isDisLoad = true;
      this.$axios.get("getArt", { params }).then((rs) => {
        if (rs.length === 0) {
          Toast("数据已经见底啦！");
          this.isDisLoad = true;
          this.isShow = false;
          return;
        }
        let temp = rs.map((el) => {
          let obj = {};
          obj.id = el.id;
          obj.title = el.title;
          obj.date = new Date(el.updatedAt).toLocaleDateString();
          obj.src = this.$store.state.URL + "smallSrc/" + el.smallSrc;
          return obj;
        });
        this.arr = [...this.arr, ...temp];
        this.isDisLoad = false;
        this.isShow = false;
      });
    },
    delete(id) {
      this.$axios.get("delArt", { params: { id } }).then((rs) => {
        console.log(rs[0]);
        Toast("数据已经删除");
        this.arr.length = 0;
        this.skip = 0;
        this.loadData();
      });
    },
  },
};
</script>
<style lang="less" scoped>
div.introduction {
  height: calc(100% - 55px);


  .search {
    height: 50px;
  }

  .spinner {
    position: fixed;
    top: 300px;
    left: calc(50% - 20px);
    z-index: 100;
    width: 100px;
    height: 100px;
  }

  ul {
    padding: 0;
    margin: 0;
    list-style: none;

    li {


      a,
      a:visited {
        div.row {
          padding: 10px 0px;
          display: flex;



          img {
            width: 60px;
            height: 60px;
            border-radius: 4px;
          }

          section {

            margin-left: 55px;
            display: flex;
            flex-direction: column;
            justify-content: space-around;

            h5 {
              margin: 0;
              color: #333;
              height: 25px;
              line-height: 25px;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
              overflow: hidden;
            }

            p {
              margin: 3px 0 5px 60px;
              font-size: 13px;
              color: rgb(222, 224, 225);
            }
          }
        }
      }

      .mint-cell:last-child {
        background-image: none;
      }

      .mint-cell-wrapper {
        padding: 0 0 0 2px;
      }
    }
  }
}
</style>